<template>
    <Container>
        <div class="InventoryManage">
            <div class="InventoryManage-page">
                <div class="InventoryManage-page-nav" v-if="storageData && storageData.length">
                    <el-dropdown>
                        <span class="el-dropdown-link">
                            {{ storageInfo.storageName }}
                            <el-icon class="el-icon--right">
                                <arrow-down />
                            </el-icon>
                        </span>
                        <template #dropdown>
                            <el-dropdown-menu>
                                <el-dropdown-item v-for="item, index in storageData" :key="index" @click="selectStorage(item)">
                                    <div >
                                        {{ item.storageName }}
                                    </div>
                                </el-dropdown-item>
                            </el-dropdown-menu>
                        </template>
                    </el-dropdown>
                    <el-tabs
                        v-model="types" v-if="menuItem.length > 0"  @tab-change="parentMethod"
                        class="custom-tabs"
                        >
                        <el-tab-pane
                            v-for="(tab,index) in menuItem"
                            :key="index"
                            :label="tab.menuName"
                            :name="tab.perms"
                            >
                        </el-tab-pane>
                    </el-tabs>  


                </div>
                <div v-if="storageInfo">
                    <inventory v-if="tabs == 'inventory'" :key="storageInfo.storageId" :storageInfo="storageInfo"></inventory>
                    <supply v-if="tabs == 'supply'" :key="storageInfo.storageId" :storageInfo="storageInfo"></supply>
                    <purchase v-if="tabs == 'purchase'" :key="storageInfo.storageId" :storageInfo="storageInfo"></purchase>
                    <req v-if="tabs == 'req'" :key="storageInfo.storageId" :storageInfo="storageInfo"></req>
                </div>
            </div>
        </div>
    </Container>
</template>

<script setup lang="ts">
import { getStorageList } from '@/api/storage'
import { ArrowDown, Search } from '@element-plus/icons-vue'
import inventory from './inventory/index.vue'
import supply from './supply/index.vue'
import purchase from './purchase/index.vue'
import req from './req/index.vue'
import type { List as storageList } from '@/types/storage/index';
const list = ref<any>([])
//  '调拨', '报损', '盘点','领用',['库存', '采购', '领用' ,'供应商']
//获取菜单
import stores from '@/store';
const route = useRoute();
//菜单权限
let menuList = ref<any>( await stores.useBaseDataStore().findMenuList(route.query.menuId));
menuList.value = menuList.value.filter((item:any) => {
    return  item.menuType == 2;
})
let menuItem = ref<any>(menuList.value);
const types = ref<string>(menuItem.value[0].perms); // 默认选中标签
navigateTo('/InventoryManage?menuId='+route.query.menuId+'&submenuId='+menuItem.value[0].menuId);

const tabs = ref<string>(types.value)

const parentMethod = (val: any) => {
    for (let index = 0; index < menuItem.value.length; index++) {
        let item = menuItem.value[index];
        if(item.perms == val){
            navigateTo('/InventoryManage?menuId='+route.query.menuId+'&submenuId='+item.menuId);
            types.value = val
            setTimeout(() => {
                tabs.value = val
            }, 222);
        }
    }
   

}

const storageInfo = ref<any>()
const selectStorage = (item: any) => {
    storageInfo.value = item
}
// 获取药库列表
const storageData = ref<storageList[]>()
const getStorageLists = async () => {
    const res = await getStorageList({
        pageNo: 1,
        pageSize: 100000,
    })
    if(res.code != '200'){
        //ElMessage.error(res.msg);
        return;
    }
    storageData.value = res.data.list

    for (let index = 0; index < res.data.list.length; index++) {
        let item = res.data.list[index];
        if (item && item.isDefault == '1') {
            storageInfo.value = item
        }

    }
}
getStorageLists()


definePageMeta({
  middleware: 'manage-redirect',
})
</script>

<style lang="scss" scoped>
.InventoryManage {
    padding: 24px;
    height: 100%;
    ::v-deep(.el-tabs__item) {
        width: 110px !important; /* 设置每个tab的宽度 */
        padding: 0 !important; /* 去除默认padding */
        font-size: 16px !important; /* 设置字体大小 */
    }
    ::v-deep(.el-tabs__nav-wrap:after){
        height: 1px !important;
    }
    ::v-deep(.el-tabs__header){
        margin: 0 !important;
    }
}

.InventoryManage-page {
    background: #fff;
    border-radius: 6px;
    height: 100%;

    .InventoryManage-page-nav {
        display: flex;
        align-items: center;
        justify-content: left;
        border-radius: 4px;
        border-bottom: 1px solid #E7E7E7;

        .el-dropdown-link {
            background: rgba(22, 173, 164, 0.08);
            border-radius: 0px 0px 0px 0px;
            padding: 16px 21px;
            cursor: pointer;
            color: var(--el-color-primary) !important;
            display: flex;
            font-size: 16px;
            align-items: center;
        }

    }


}
</style>